<template>
    <div class="staff-care">
        <div style="display: flex; justify-content: center;">
            <span style="color: white; font-size: 30px; padding-top:30px;">AI聊天室</span>
        </div>
        <div class="temper-container" style="margin: 20px; margin-bottom: 10px;">
            <div style="margin-right: 10px;" v-for="(temper, index) in temperList" :key="index">
                <el-button @click="selectTemperature(temper)"
                    :type="selectedTemperature === temper ? 'primary' : 'default'"
                    :plain="selectedTemperature !== temper">
                    {{ temper }}
                </el-button>
            </div>

            <div class="flex justify-end" style="flex: auto;">
                <el-button @click="clearMessage()" type="primary">一键清空</el-button>
            </div>
        </div>

        <!-- 为滚动容器添加ref -->
        <div ref="scrollContainer" style="height: 60vh; overflow-y: auto;">
            <div v-for="(chat, index) in chatList" :key="index">
                <div v-if='chat.role == "assistant"' class="flex rounded-xl"
                    style="background-color: wheat; margin: 20px; padding: 20px;">
                    <img class="rounded-full" style="width: 80px; height: 80px; margin-right: 10px;"
                        :src="require('./imagePlaceholder.png')" alt="">
                    <div style="width: 90%;" class="bot-message">
                        {{ chat.content
                            .replace('。', '\n ')
                            .replace('1、', '\n 1、')
                            .replace('2、', '\n 2、')
                            .replace('3、', '\n 3、')
                            .replace('4、', '\n 4、')
                            .replace('5、', '\n 5、') }}
                    </div>
                </div>
                <div v-else>
                    <div class="flex flex-row-reverse rounded-xl"
                        style="background-color: white; margin: 20px; padding: 20px;">
                        <img class="rounded-full" style="width: 80px; height: 80px; margin-left: 20px;"
                            :src="require('./testPhoto.jpg')" alt="">
                        <div class="flex flex-row-reverse" style="width: 90%;flex: auto;">
                            {{ chat.content }}
                        </div>
                    </div>
                </div>


            </div>
        </div>

        <!-- 聊天输入区域 -->
        <div class="chat-input-area">
            <textarea id="messageInput" v-model="inputMessage" placeholder="输入消息..." class="chat-input"
                @keypress="handleKeyPress"></textarea>
            <div @click="sendMessage" class="send-button">
                发送
            </div>
        </div>
    </div>
</template>
<script>
// 移除错误的导入
import { Row } from "element-ui";
import { postSendContent } from "./index.api";
export default {
    data() {
        return {
            chatList: [],//列表内容
            messageList: [{ role: "user", content: "你好" }],//列表内容
            temperList: ["外向型", "内向型", "领导型", "稳定型", "创新型"],
            selectedTemperature: null, // 初始未选中任何温度
            inputMessage: '',
        }
    },
    watch: {
        chatList: {
            handler() {
                this.$nextTick(() => {
                    this.scrollToBottom();
                });
            },
            deep: true
        }
    },
    mounted() {
        this.scrollToBottom();
        this.postSendContentServer();
    },
    methods: {
        selectTemperature(temper) {
            // 点击时更新选中的温度
            this.selectedTemperature = temper;
            this.messageList.push({ role: 'user', content: temper });
            this.chatList.push({ role: 'user', content: temper });
            // 模拟机器人回复
            setTimeout(() => {
                this.postSendContentServer()
            }, 500);
        },

        //清空文字
        clearMessage() {
            this.selectedTemperature = null// 初始未选中任何温度
            this.chatList = []
            this.messageList = [{ role: "user", content: "你好" }]
            this.postSendContentServer()
        },
        //发送文字
        postSendContentServer() {
            this.chatList.push({
                role: 'assistant',
                content: "AI正在思考🤔，请稍后..."
            });

            if (this.messageList.length > 10) {
                this.messageList.shift()
                this.messageList.shift()
            }

            postSendContent(this.messageList).then(res => {
                if (res.message = "success") {
                    this.chatList[this.chatList.length - 1].content = res.data
                    this.chatList[this.chatList.length - 1].role = "assistant"
                    this.messageList.push({
                        role: 'assistant',
                        content: res.data
                    });

                }
            })
        },

        sendMessage() {
            const content = this.inputMessage.trim();
            if (content) {
                this.messageList.push({ role: 'user', content: content });
                this.chatList.push({ role: 'user', content: content });
                this.inputMessage = '';
                console.log('消息已发送');
                // 模拟机器人回复
                setTimeout(() => {
                    this.postSendContentServer()
                }, 500);
            }
        },
        handleKeyPress(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                this.sendMessage();
            }
        },
        scrollToBottom() {
            // 修改为引用正确的滚动容器
            const container = this.$refs.scrollContainer;
            if (container) {
                container.scrollTop = container.scrollHeight;
            }
        },
    }
};
</script>
<style lang="scss" scoped>
.temper-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.staff-care {
    overflow: hidden !important;
    background: black;
    width: 100%;
    height: 100%;
}

.chat-input-area {
    display: flex;
    padding: 20px;
    background-color: white;
    border-top: 1px solid #e0e0e0;
}

.chat-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-right: 8px;
    outline: none;
    height: 200px;
    resize: none;
    font-family: inherit;
    font-size: 14px;
    align-items: flex-start;
}

.send-button {
    padding: 10px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    height: 50px;
    transition: background-color 0.2s;
}

.bot-message {
    white-space: pre-wrap;
}
</style>